<template>
	<div class="page">
		
		<head-back></head-back>
		
		 <div class="content">
			<form action="" method="" id="" autocomplete="off">
				<div class="list-block list-margin content-marbottom10 content-martop10 content-boxshow">
					<ul>
						<li>
							<div class="item-content   content-padrights" >
								<div class="item-inner border-bottom">
									<div class="item-input">
										<input type="text" id="pjname" v-model="pjname" placeholder="项目名称(*)">
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="item-content   content-padrights" >
								<div class="item-inner border-bottom">
            						<div class="item-input">
              							<textarea id="pjdesc" v-model="pjdesc" placeholder="项目介绍(选填)"></textarea>
						            </div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				
			</form>
		</div>
		<footer class="bar bar-tab">
			<a id="projectnew" class="button button-big button-warning">新建项目</a>
		</footer>
	</div>
		
	<panel></panel>
		
</template> 

<script>
	import headBack from "../components/headBack.vue"
	import panel from "../components/panel.vue"
	import store from "../vuex/store.js"
	import getters from "../vuex/getters.js"
	import actions from "../vuex/actions.js"
	
	export default {
		name: "projectnew",
		data(){
			return {
				pjname: '',
				pjdesc: ''
			}
		},
		methods: {
			create(){
				var self = this;
				
				var name_exp = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
				
				function checkName(){
					var content = $('#pjname').val();
					if(content.length>30 || content.length<2){
						return $.toast('请填写项目名称，长度2-30位');
					}else if(!name_exp.test(content)){
						return $.toast('项目名由汉字、字母或数字组成');
					}else{
						return true;
					}
				};

				function go(data){
					$.toast('项目创建成功');
					localStorage.setItem("projectid",data.pjid);
					localStorage.setItem("projectname",data.pjname);
					self.$router.go("/project.view?" + data.pjid);
				};

				$('#pjname').blur(checkName);

				$('#projectnew').click(function(){
					if(checkName()){
						var name = $('#pjname').val();
						var desc = $('#pjdesc').val();
						var param = {"pjname": name, "pjdesc": desc};
						
						self.ajax('./api/project','create',param,function(data){
							if(data.iscd){
								go(data);  
							}else{
								$.confirm('项目已存在!确定继续?',function(){
							    	go(data);  
							    });
							}
						});
					}
				});
			}
		},
		components: {
			headBack,
			panel
		},
		store: store,
		vuex: {
			getters: {
				isLogin: getters.loginStatus
			},
			actions: {
				loginIn: actions.loginIn
			}
		},
		route: {
			data(){
			}
		},
		ready(){
			this.create()
		}
	}
</script>
